<template>
  <div>
    <a-alert style="text-align: center;margin-bottom: 10px" message="所有文件只保留5分钟，5分钟后将自动删除！" type="info"/>

    <a-upload-dragger
      class="avatar-uploader"
      name="file"
      accept=".doc,.docx"
      list-type="picture-card"
      :multiple="isMultiple"
      :customRequest="customRequest"
      :data="{biz:bizPath}"
      :show-upload-list="false"
      :disabled="disabled"
      :before-upload="beforeUpload"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="cloud-upload"/>
      </p>
      <p class="ant-upload-text">
        单击或拖动文件到此区域进行上传
      </p>
      <p class="ant-upload-hint">
        只支持单次上传
      </p>
    </a-upload-dragger>
    <a-spin tip="正在转换请稍后......" v-if="disabled">
      <div class="spin-content">
      </div>
    </a-spin>
    <a-alert :message="orgName+'   ---    转换成功'" type="success" style="text-align: center;margin-top: 10px" v-if="orgName != ''"/>
    <div v-if="filePath != ''" style="margin-top: 20px;text-align: center">
      {{ fileName }}
      <a-button style="margin-left: 20px">
        <a :href="this.url.downloadImg + filePath">
          下载
        </a>
      </a-button>
    </div>

  </div>
</template>


<script>
import {getAction, getFileAccessHttpUrl, postAction} from '@/api/manage'
import AntsImageUpload from '@/components/ants/AntsImageUpload'

export default {
  name: 'docToPdf',
  components: {
    AntsImageUpload
  },
  data() {
    return {
      form: this.$form.createForm(this),
      url: {
        compressUpload: '/articleView/docToPdf',
        downloadImg: process.env.VUE_APP_BASE_API + 'sys/common/static/'
      },
      isMultiple: false,
      disabled: false,
      bizPath: 'docToPdf',
      filePath: '',
      orgName: '',
      fileName: '',
    }
  },
  created() {
  },
  methods: {
    key() {
      return this.$route.path
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过20MB!');
      }
      return isLt2M;
    },
    //重写上传方法
    customRequest(data) {
      this.disabled = true
      const formData = new FormData();
      formData.append("file", data.file);
      formData.append("biz", this.bizPath);
      postAction(this.url.compressUpload, formData).then(res => {
        if (res.success) {
          this.orgName = res.result.orgName
          this.filePath = res.result.filePath
          this.fileName = res.result.fileName
          this.disabled = false
        }
      }).catch(e => {
        this.disabled = false
      });
    },
    onChange(e) {
    },
  }

}
</script>

<style>
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
  margin-top: 10px;
}

</style>

